<template>
    <div>
      <div>{{info.name}}</div>
      <div>{{info.age}}</div>
      <button @click="changeName">修改名称</button>
      <button @click="changeAge">修改年龄</button>
    </div>
  </template>
  <script setup>
  import { reactive, watchEffect } from 'vue'
      const info = reactive({
        name: 'code',
        age: 18
      })
      const changeName = () => {
        info.name = 'codeWhy'
      }
      const changeAge = () => {
        info.age++
        if (info.age > 26) {
        stopWatchEffect()
      }
      }
      const stopWatchEffect = watchEffect(() => {
        console.log('info', info.name,info.age)
      })
      console.log(stopWatchEffect)

  </script>